/**
* 合同-查看
*/
<template>
    <div class="layout-parent w100 p10">
        <el-tabs type="border-card">
            <el-tab-pane>
                <template #label><vp-label zh="基本信息" en="Basic Info" /></template>
                <Contract ref="commRef" :loading="loading" :id="props.id" :type="type" @formSubmited="formSubmitedHandler">
                </Contract>
            </el-tab-pane>
            <el-tab-pane>
                <template #label><vp-label zh="操作记录" en="Operation Record"/></template>
                <VpOperationRecordCard :id="props.id" ref="rcListRef"></VpOperationRecordCard>
            </el-tab-pane>
        </el-tabs>
        <div class="status-bar">
            <el-tag type="info" v-if="formData.zt === 10"><vp-label zh="草稿" en=""/></el-tag>
            <el-tag type="info" v-if="formData.zt === 20"><vp-label zh="提交" en=""/></el-tag>
            <el-tag type="info" v-if="formData.zt === 98"><vp-label zh="作废" en=""/></el-tag>
            <el-tag type="info" v-if="formData.zt === 99"><vp-label zh="关闭" en=""/></el-tag>
        </div>
    </div>
</template>
<script setup lang="ts" name="viewContract">
import { ref,computed } from 'vue';
import request from '/@/utils/request';
import Contract from './contract.vue';
import StatusBar from '/@/components/vp/status/StatusBar.vue';
import VpOperationRecordCard from '/@/components/vp/operationRecord/VpOperationRecordCard.vue';

const props= defineProps<{ 
    id: string,
}>();

const loading = ref(false);
const type = ref('view');

const commRef = ref();

const formData = ref({
    id: '',
    zt: 10,
});

const formSubmitedHandler= (data:any)=>{
    console.log(data,"data---")
    formData.value = data;
};


</script>

<style scoped lang="scss">
    .status-bar {
        position:absolute;
        top: 14px;
        right: 36px;
        display: flex;
    }
    :deep(.el-tag) {
        height: 32px;
    }
</style>